<template>
  <view class="notice-bar font26">
    <view class="notice-icon">
      <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/message.png"             style="width: 40rpx;height: 36rpx"></image>
    </view>
    <view class="notice-content">
      <!-- 使用 swiper 实现垂直滚动 -->
      <swiper
          class="scroll-wrapper"
          :vertical="true"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          :circular="true"
          :indicator-dots="false"
          :disable-touch="true"
      >
        <swiper-item v-for="(item, index) in notices" :key="index" class="swiper-item">
          <view class="notice-item">
            {{ item.title }}
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    notices: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      singleHeight: 20
    }
  },
  mounted() {
  },
  methods: {
    calcHeight() {

    }
  }
}
</script>

<style scoped>.notice-bar {
  display: flex;
  align-items: center;
  border-radius: 20rpx;
}

.notice-icon {
  margin-right: 16rpx;
}

.notice-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.scroll-wrapper {
  height: 40rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  align-items: center;
}

.notice-item {
  color: rgba(92, 92, 92, 1);
  height: 40rpx;
  line-height: 40rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
</style>